<template >
    <div>
        <div class="login-title">
            <p class="title">欢迎注册 · 售后服务管理商家端</p>
        </div>
        <div class="tabs">
            <div class="tab tab_temp">账号注册</div>
        </div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="0">
            <el-form-item prop="username" class="el-item">
                <el-input placeholder="输入姓名" type="text" autoComplete="on" v-model="ruleForm.username">
                </el-input>
            </el-form-item>
            <el-form-item prop="phone" class="el-item">
                <el-input placeholder="输入手机号" maxlength="11" type="tel" autoComplete="on" v-model="ruleForm.phone">
                </el-input>
            </el-form-item>
            <el-form-item prop="password" class="el-item">
                <el-input placeholder="输入登录密码" autoComplete="on"
                    @input="ruleForm.password = ruleForm.password.replace(/[\u4E00-\u9FA5\s]/g, '')"
                    v-model="ruleForm.password" :type="passwordType">
                    <template #suffix>
                        <div class="show-pwd" @click="showPwd"><svg-icon
                                :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /></div>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="newpassword" class="el-item">
                <el-input placeholder="确认登录密码"
                    @input="ruleForm.newpassword = ruleForm.newpassword.replace(/[\u4E00-\u9FA5\s]/g, '')" autoComplete="on"
                    v-model="ruleForm.newpassword" :type="passwordType2">
                    <template #suffix>
                        <div class="show-pwd" @click="showPwd2"><svg-icon
                                :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" /></div>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="code">
                <el-input placeholder="输入验证码" maxlength="6"
                    @input="ruleForm.code = ruleForm.code.replace(/[\u4E00-\u9FA5\s]/g, '')" autoComplete="on"
                    v-model="ruleForm.code">
                    <template #suffix>
                        <div class="getcode" @click="getregisterCode" v-if="count == 0">获取验证码</div>
                        <div class="getcode" v-else>{{ count }}s重新获取</div>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <div class="check">
                    <div class="check_left">
                        <el-checkbox v-model="checked1" size="large">
                            <div class="agree_re">
                                同意 <span>&nbsp;商家条款&nbsp;</span>和&nbsp;<span>注册条款</span>
                            </div>
                        </el-checkbox>
                    </div>
                </div>
            </el-form-item>
            <el-form-item style="width: 100%">
                <el-button :loading="loading" class="login-btn" :disabled="!(ruleForm.phone && ruleForm.password)"
                    type="primary" color="#007cff" @click="submitForm(ruleFormRef)">注册</el-button>
            </el-form-item>
        </el-form>
        <div class="text">已有账号？ <div class="goRegister" @click="goLogin">立即登录</div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import { ElNotification, ElMessage, FormInstance } from "element-plus";
import { useRouter } from 'vue-router'
import { useUserStore } from "../../../store/modules/user"
import { getTimeState } from '../../../utils/index'
import { registerCode, register } from '../../../api/user'
import { phone, password } from '../../../utils/validate'
import * as  _ from 'lodash'
const ruleFormRef = ref<FormInstance>()
const router = useRouter()
const UserStore = useUserStore()
const clear = ref(null)
const passwordType = ref('password')
const passwordType2 = ref('password')
const loading = ref(false)
import md5 from 'js-md5'  //引入md5 加密
// 表单数据
const ruleForm = reactive({
    username: '',
    phone: '',
    password: '',
    newpassword: '',
    code: '',
})
const rules = reactive({
    username: [{ required: true, message: "请输入姓名", trigger: "blur" }],
    phone: [{ required: true, message: "请输入手机号", trigger: "blur" }, { validator: phone(ruleForm.phone), trigger: 'blur' }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }, {
        validator: password(ruleForm.password), trigger: "blur"
    }],
    newpassword: [{ required: true, message: "请确认密码", trigger: "blur" }, {
        validator: (rule: any, value: string, callback: any) => {
            if (ruleForm.password != ruleForm.newpassword) {
                callback(
                    new Error("密码不一致")
                );
            } else {
                callback()
            }
        }, trigger: "blur"
    }],
    code: [{ required: true, message: "请输入验证码", trigger: "blur" }, { pattern: /^\d*$/, message: '请输入正确的验证码', trigger: "blur" }],
})

const checked1 = ref(false)
// 倒计时
const count = ref(0)
const showPwd = () => {
    if (passwordType.value === 'password') {
        passwordType.value = ''
    } else {
        passwordType.value = 'password'
    }
}
const showPwd2 = () => {
    if (passwordType2.value === 'password') {
        passwordType2.value = ''
    } else {
        passwordType2.value = 'password'
    }
}

//md5密码加密
const { proxy } = getCurrentInstance() as any
proxy.$md5 = md5   //md5转换为vue原型
// 登录页面
const goLogin = () => {
    router.push({ path: '/login/index' })
}
// 注册
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    if (!checked1.value) {
        ElMessage({
            showClose: true,
            message: '请勾选同意协议条款！',
            type: 'error',
            duration: 3000
        })
        return
    }
    loading.value = true
    formEl.validate((valid) => {
        if (valid) {
            let data = _.cloneDeep(ruleForm)
            data.password = proxy.$md5(ruleForm.password)
            data.newpassword = proxy.$md5(ruleForm.newpassword)
            delete data.newpassword
            register(data).then(res => {
                if (res.data.success) {
                    router.push({ path: '/login/resuccess' })
                    ElMessage({
                        showClose: true,
                        message: res.data.message,
                        type: 'success',
                        duration: 3000
                    })
                } else {
                    ElMessage({
                        showClose: true,
                        message: res.data.message,
                        type: 'error',
                        duration: 3000
                    })
                }
                loading.value = false
            })
        } else {
            loading.value = false
        }
    })
}
// 获取验证码
const getregisterCode = () => {
    if (!ruleForm.phone) {
        ElMessage({
            showClose: true,
            message: "请先输入手机号",
            type: 'error',
            duration: 3000
        })
        return
    }
    count.value = 60
    clear.value = setInterval(() => {
        count.value -= 1
        if (count.value == 0) {
            clearInterval(clear.value)
        }
    }, 1000)
    registerCode({ phone: ruleForm.phone }).then(res => {
        if (res.data.success) {
            ElMessage({
                showClose: true,
                message: res.data.message,
                type: 'success',
                duration: 3000
            })
        } else {
            ElMessage({
                showClose: true,
                message: res.data.message,
                type: 'error',
                duration: 3000
            })
        }
    })
}

</script>
  
<style lang="scss" scoped>@import "../index.scss";</style>
  